<template>
  <div class="base-container">
    <div>
      <P class="NationalName">
        <span style="color: #676391;margin-right: 10px;">所选行政区:</span>
        <span v-if="provinceName!=''">{{ provinceName }}</span>
        <span v-if="cityName!=''"><span style="margin: 0px 3px">/</span>{{ cityName }}</span>
      </P>
      <div class="topButton">
        <el-button class="Btn" size="small" type="topSubButtom" @click="addDistrict">
          <svg-icon icon-class="add" class="buttonSvg"/>
          行政区录入
        </el-button>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="8" style="background: #222339;padding: 0px 10px;">
        <el-table
            :data="provinceTableData"
            empty-text="暂无省数据"
            :default-sort="{ prop: 'date', order: 'descending' }"
            @current-change="(val) => handleCurrentChange('cityTableData','provinceName','provinceId', val)"
            style="width: 100%;height: 720px;">
          <el-table-column prop="districtName" label="省" align="center"/>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button class="Btn" size="small" type="del" @click="updDistrictGroup(scope.row,1)">
                <svg-icon icon-class="edit" class="buttonSvg"/>
              </el-button>
              <el-button class="btn-donate" size="small" type="del" @click="deleteDistrictGroup(scope.row)">
                <svg-icon icon-class="del" class="buttonSvg"/>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="8" style="background: #222339;padding: 0px 10px;">
        <el-table
            :data="cityTableData"
            empty-text="暂无市数据"
            :default-sort="{ prop: 'date', order: 'descending' }"
            @current-change="(val) => handleCurrentChange('tableData','cityName','cityId', val)"
            style="width: 100%;height: 720px;">
          <el-table-column prop="districtName" label="市" align="center"/>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button class="Btn" size="small" type="del" @click="updDistrictGroup(scope.row,2,provinceId)">
                <svg-icon icon-class="edit" class="buttonSvg"/>
              </el-button>
              <el-button class="btn-donate" size="small" type="del" @click="deleteDistrictGroup(scope.row)">
                <svg-icon icon-class="del" class="buttonSvg"/>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="8" style="background: #222339;padding: 0px 10px;">
        <el-table
            :data="tableData"
            empty-text="暂无区数据"
            :default-sort="{ prop: 'date', order: 'descending' }"
            style="width: 100%;height: 720px;">
          <el-table-column prop="districtName" label="区" align="center"/>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button class="Btn" size="small" type="del" @click="updDistrictGroup(scope.row,3,provinceId,cityId)">
                <svg-icon icon-class="edit" class="buttonSvg"/>
              </el-button>
              <el-button class="btn-donate" size="small" type="del" @click="deleteDistrictGroup(scope.row)">
                <svg-icon icon-class="del" class="buttonSvg"/>
              </el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <edit-district-dialog ref="edit_district_dialog"/>
  </div>
</template>
<script>
import EditDistrictDialog from "@/views/district/components/EditDistrictDialog.vue";

let me = this;
export default {
  name: "NationalAdministrativeMessage",
  components: {EditDistrictDialog},
  data() {
    return {
      provinceTableData: [],
      cityTableData: [],
      tableData: [],
      provinceName: '',
      cityName: '',
      provinceId: '',
      cityId: ''
    }
  },
  mounted() {
    me = this;
    this.selTableData('provinceTableData', '');
  },
  methods: {
    handleCurrentChange(name, nName, nId, row) {
      if (row == null) return;
      if (name == 'cityTableData') {
        this.tableData = [];
        this.cityName = '';
      }
      me[nName] = row.districtName;
      me[nId] = row.districtId;
      this.selTableData(name, row.districtId)
    },
    updDistrictGroup(row, radio, provinceId, cityId) {
      this.$refs.edit_district_dialog.showDialog(row, radio, true, provinceId, cityId);
    },
    addDistrict() {
      this.$refs.edit_district_dialog.showDialog();
    },
    async selTableData(name, id) {
      let response = await this.$asyncPost("district", {
        actionType: "districtQuery",
        parentId: id
      });
      if (response.success) {
        me[name] = response.districtList;
      } else {
        this.$message.error(response.message);
      }
    },
    deleteDistrictGroup(row) {
      this.$confirm("是否删除" + row.districtName + "?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "confirm"
      })
          .then(async () => {
            try {
              let response = await this.$asyncPost("district", {
                actionType: "districtDelete",
                districtIds: [row.districtId]
              });
              if (response.success) {
                this.$message.success("删除成功");
                this.selTableData(); // 重新获取数据以更新列表
              } else {
                this.$message.error(response.message);
              }
            } catch (error) {
              this.$message.error("删除发生错误");
            }
          })
          .catch(() => {
            this.$message.info("取消");
          })
    },
  }
}
</script>
<style scoped>

</style>